<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 倒计时 </title>
    <style>
        main{
            width:300px; margin:50px auto; background:#000; color:#fff;
            text-align:center; padding:20px 0; font-size:20px;
            line-height:40px;
        }
        span{
            display:inline-block; background:#fff; width:40px; height:40px;
            color:#000;
        }
        button{
            padding:10px 20px; border:none; background:blue; color:#fff;
            font-size:22px;
        }
        button:hover{
            background:red; transition:0.5s;
        }
    </style>
</head>
<body>
<!--步骤：-->
<!--1.页面规划-->
<!--2.获取所需要的标签-->
<!--3.点击事件处理： （1）处理秒针减1，-->
               <!--（2）判断(秒针==0或<0)， 从 分针拿1， 秒针重赋值-->
                <!--(3)判断(分针==0或<0)， 分针不可再拿值-->
                <!--(4)判断当秒针再次==0， 停止倒计时-->
<main>
    <p>
        <span> 01 </span> 分 <span> 10 </span> 秒
    </p>
    <p>
        <button type="button"> 开始倒计时 </button>
    </p>
</main>
<script>
//    获取某个标签的方法
//    1.通过Id名获取元素(标签) ==== getElementById('demo')
//    2.通过class名获取元素 ==== getElementsByClassName('active')
//    3.通过Tag名获取元素 ==== getElementsByTagName('div')
//    4.通过选择器获取元素 ====
//        querySelector('.active')  == 选取的符合条件的第一个标签
//        querySelectorAll()  === 选取符合条件的所有的标签

    //1. 获取所需要的标签
//    var 声明一个变量，用来存储数据的
    var span1 = document.querySelector('span')
    var span2 = document.querySelectorAll('span')[1]
    var button = document.querySelector('button')
    // 获取所需要的数字
    var num1 = span1.innerHTML
    var num2 = span2.innerHTML
// 设置点击次数
    var count = 0
    var timer
    // 转换数据类型  , parseInt()解析字符串，转换成整数
//     parseFloat() 解析字符串，转换成浮点数
    num1 = parseInt(num1)
    num2 = parseInt(num2)

    // 函数的作用：封装部分代码， 避免代码重复 ，可实现多次调用
    // setInterval(function , time) 作用：间隔多少毫秒，执行函数

    function show(){
        num2--
        if( num2 < 0 ){
            num1--
            if(num1 < 0 ){
                return   // 返回/代码中断执行
            }
            num1 = num1 < 10 ? '0' + num1 : num1
            span1.innerHTML = num1
            num2 = 11
        }
        // 三元运算符/三目/条件
        num2 = num2 < 10 ? '0' + num2 : num2
        span2.innerHTML = num2
    }
//    show()

    button.onclick = function(){
        count++
        // 根据点击的奇偶数判断，开始/暂停
        if( count % 2 !== 0  ){
            timer = setInterval(show, 1000)
        } else {
            clearInterval(timer)
        }

    }
</script>
</body>
</html>